<template>
  <div class="container" style="display: flex">
    <!-- <div style="display: inline-block;"> -->
      <span class="nav_text_title" style="line-height: 60; display: inline-block; line-height: none;">小区物业管理系统</span>
    <!-- </div> -->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#389AF9"
      text-color="#fff"
      router
      active-text-color="#ffd04b"
    >
    <!-- @select="handleSelect" -->
      <el-menu-item index="/home/index">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">房屋管理</template>
        <el-menu-item index="/home/house/unit">房屋单元</el-menu-item>
        <el-menu-item index="/home/house/number">房号管理</el-menu-item>
        <el-menu-item index="/home/house/dericelnfo"
          >房屋设备信息</el-menu-item
        >
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">车位管理</template>
        <el-menu-item index="/home/parking/parkMessage">车位信息</el-menu-item>
        <el-menu-item index="/home/parking/parkPay">车位订单</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">计费管理</template>
        <el-menu-item index="/home/pay/payType">缴费类型</el-menu-item>
        <el-menu-item index="/home/pay/payMessage">缴费信息</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">服务中心</template>
        <el-menu-item index="/home/service/postMessage">公告信息</el-menu-item>
        <el-menu-item index="/home/service/repair">维修处理</el-menu-item>
        <el-menu-item index="/home/service/feedback">反馈服务</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">用户管理</template>
        <el-menu-item index="/home/user/userMessage">普通用户信息</el-menu-item>
        <el-menu-item index="/home/user/adminMessage">管理员信息</el-menu-item>
        <el-menu-item index="/home/user/Message">用户总表查询</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">菜单管理</template>
        <el-menu-item index="/home/menu/menuData">菜单列表</el-menu-item>
        <el-menu-item index="/home/menu/loginData">登录日志</el-menu-item>
      </el-submenu>
      <el-submenu index="8">
        <template slot="title">个人中心</template>
        <el-menu-item index="/home/personal/message">我的信息</el-menu-item>
        <el-menu-item index="/home/personal/change">密码修改</el-menu-item>
        <el-menu-item index="/home/personal/joinChat">小区群聊</el-menu-item>
      </el-submenu>
    </el-menu>
    <div class="userpart">
      <el-avatar :src="imgurl"></el-avatar>
      <span>{{ username }}, 你好！</span>
      <i
        class="el-icon-delete"
        style="color: #fff; cursor: pointer"
        @click="logout"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: "1",
      imgurl: "",
      username: "",
    };
  },
  methods: {
    async userpart() {
      try {
        const token = sessionStorage.token;
        const { data: res } = await this.axios.get(
          "users/getUserByToken?token=" + token
        );
        // console.log(res);
        this.imgurl = "http://community.byesame.com/file/" + res.head;
        this.username = res.username;
        // console.log(this.imgurl);
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
    logout() {
      this.$confirm("确定退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 用户点击确定按钮，执行退出登录操作
        // 清除本地存储中的用户信息
        localStorage.removeItem("username");
        // 清除sessionStorage中的token
        sessionStorage.removeItem("token");
        this.$message({
          type: "success",
          message: "退出成功!",
        });
        this.$router.push("/login");
        window.location.reload();
      });
    },
  },
  mounted() {
    this.userpart();
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between; /* 使子元素在主轴上均匀分布 */
  align-items: center; /* 垂直居中对齐 */
  background-color: #389af9; /* 背景颜色 */
  //   background-color: #389AF9; /* 背景颜色 */
  width: 100%;
  height: 100%;
}
.el-menu {
  height: 100%;
  
}
.container > div:nth-child(2) {
  margin: 0 auto;
}
.logintitle {
  font-size: 24px;
  font-weight: bold;
}
::v-deep .el-menu--horizontal .el-menu-item {
  height: 56px;
  line-height: 56px;
}
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 56px;
  line-height: 56px;
}
.nav_text_title {
  margin-left: 25px;
  line-height: 56px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
}
.userpart {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* 元素之间的间距 */
  margin-right: 20px;
}

.userpart span {
  font-size: 16px; /* 文字大小 */
  color: #fff; /* 文字颜色 */
  margin-right: 10px;
  font-weight: bold;
}

.userpart i {
  font-size: 16px; /* 图标大小 */
  color: #999; /* 图标颜色 */
}
</style>
